<template>
  <div>
    <el-tag type="info" effect="light" round @click="search"> {{ title }} </el-tag>
    <MkDialog title="患者历史反应信息" v-model="dialogVisible" width="70%" buttons="close">
      <MkTable :data="tableData" v-loading="ctx.loading">
        <MkColumnIndex />
        <MkColumnDate prop="dengJiShiJian" label="登记时间" />
        <MkColumn prop="xianXueMa" label="献血码" />
        <MkColumn prop="chanPinId" label="产品码" />
        <MkColumn prop="zhengZhuangTiZheng" label="症状与体征" />
        <MkColumn prop="linChuangZhenDuan" label="临床诊断" />
        <MkColumn prop="linChuangChuLi" label="临床处理" />
        <MkColumn prop="shuXueKeChuLi" label="输血科处理" />
      </MkTable>
      <MkPagination v-model:page="ctx.page" v-model:pageSize="ctx.pageSize" :total="ctx.total" @query="search" />

    </MkDialog>
  </div>
</template>

<script lang='ts' setup>
import { TraShenQingApi } from '/@/api/tra/TraShenQing';
import { isNull } from '/@/utils';

const props = defineProps({
  title: { type: String, default: '历史输血' },
  huanZheId: { type: String },
  zhuYuanHao: { type: String }
});

const dialogVisible = ref(false);
const tableData = ref([]);
const ctx = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
  loading: false
})
/** 检索 */
const search = async () => {
  if (isNull(props.huanZheId) && isNull(props.zhuYuanHao)) {
    tableData.value = []
    dialogVisible.value = true
    return
  }
  // ctx.loading = true
  // TODO 接口未实现
  // TraShenQingApi.checkLiShiFuHePage({
  //   huanZheId: props.huanZheId,
  //   zhuYuanHao: props.zhuYuanHao,
  //   page: ctx.page,
  //   pageSize: ctx.pageSize
  // }).then(res => {
  //   tableData.value = res.items
  //   ctx.total = res.total
  dialogVisible.value = true;
  // }).finally(() => {
  //   ctx.loading = false
  // })
};

</script>